<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Figma Plus</title>
		<link rel="stylesheet" href="assets/css/style.css" />
		<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
		<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png" />
		<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png" />
		<link rel="manifest" href="assets/images/favicon/site.webmanifest" />
		<link rel="mask-icon" href="assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5" />
		<link rel="shortcut icon" href="assets/images/favicon/favicon.ico" />
		<meta name="msapplication-TileColor" content="#da532c" />
		<meta name="msapplication-config" content="assets/images/favicon/browserconfig.xml" />
		<meta name="theme-color" content="#ffffff" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js"></script>
		<script src="https://cdn.plyr.io/3.5.3/plyr.js"></script>
		<meta property="og:title" content="Figma Plus" />
		<meta property="og:description" content="Discover and install third-party plugins for Figma" />
		<meta property="og:image" content="assets/images/thumb.jpg" />
		<meta property="og:url" content="https://figmaplus.com/index.html" />
	</head>

	<body>
		<header>
			<nav>
				<a href="https://docs.figmaplus.com" target="_blank">Documentation</a>
				<a href="https://docs.figmaplus.com/#/api/introduction" target="_blank">Developer Plugin API</a>
				<a href="https://spectrum.chat/figma-plus" target="_blank">Need Help?</a>
				<a href="#" data-team>Team</a>
			</nav>
		</header>

		<main class="l-container">
			<div class="c-logos">
				<object type="image/svg+xml" data="assets/images/figma-logo.svg"></object>
				<span>/</span>
				<object type="image/svg+xml" data="assets/images/panel-logo.svg"></object>
			</div>

			<div class="l-text">
				<div class="c-intro">
					<h1>Figma Plus</h1>
					<p class="tagline">Discover and install third-party plugins for Figma</p>
					<p class="disclaimer">
						This project has ceased development.
						<a
							class="learn-more"
							href="https://spectrum.chat/figma-plus/general/thank-you-and-good-bye~ef95c63c-b8e1-4885-8404-d8bf08fdb1d0"
							target="_blank"
							>Learn more</a
						>
					</p>
				</div>
			</div>

			<footer>
				<ul class="c-socials">
					<li><a href="https://twitter.com/figmaplus" target="_blank" class="c-socials_twitter"></a></li>
					<li><a href="https://github.com/figma-plus" target="_blank" class="c-socials_github"></a></li>
					<li><a href="https://spectrum.chat/figma-plus" target="_blank" class="c-socials_spectrum"></a></li>
				</ul>
			</footer>

			<div class="c-shot">
				<img src="./assets/images/panel.png" alt="Figma Plugin Panel Screenshot of the UI" />
			</div>
		</main>

		<div class="bg">
			<css-doodle>
				:doodle { @grid: 5 / 80rem; @shape: circle; } border-radius: 1000px; border: 1px dotted transparent; --r:
				@rand(360deg); --n: calc( @abs(@abs(@row() - 8) + @abs(@col() - 8) - 15) / 15); transform: rotate(var(--r));
				border-left-color: @pick(#F24E1E, #FF7262, #A259FF, #1ABCFE, #0ACF83); animation: spin calc(2s / var(--n))
				linear infinite; @keyframes spin { to { transform: rotate( calc(var(--r) + @pick(1turn, -1turn))); } }
			</css-doodle>
		</div>

		<div class="team">
			<div class="l-container">
				<h2>The team behind Figma Plus</h2>
				<div class="team-grid">
					<div class="team-member">
						<div class="team-icon">
							<img src="assets/images/avatars/1.jpg" alt="Ahmad Al Haddad Portrait" />
						</div>
						<h3>Ahmad Al Haddad</h3>
						<p>Head of Product Design, Tam</p>
						<ul>
							<li><a href="https://twitter.com/cdes" target="_blank">Twitter</a></li>
							<li><a href="https://spectrum.chat/users/cdes" target="_blank">Spectrum</a></li>
						</ul>
					</div>
					<div class="team-member">
						<div class="team-icon">
							<img src="assets/images/avatars/2.jpg" alt="Jackie Chui Portrait" />
						</div>
						<h3>Jackie Chui</h3>
						<p>UX Designer II, Microsoft</p>
						<ul>
							<li><a href="https://www.linkedin.com/in/jackiechui/" target="_blank">LinkedIn</a></li>
							<li><a href="https://spectrum.chat/users/jackie-chui" target="_blank">Spectrum</a></li>
						</ul>
					</div>
					<div class="team-member">
						<div class="team-icon">
							<img src="assets/images/avatars/3.jpg" alt="Mirko Santangelo Portrait" />
						</div>
						<h3>Mirko Santangelo</h3>
						<p>Senior Designer, Paper Tiger</p>
						<ul>
							<li><a href="https://twitter.com/mirkosantangelo" target="_blank">Twitter</a></li>
							<li><a href="https://spectrum.chat/users/mirko-santangelo" target="_blank">Spectrum</a></li>
						</ul>
					</div>
				</div>
				<div class="modal-close">Close</div>
			</div>
		</div>

		<div class="video-teaser">
			<div class="l-container">
				<div class="video-wrap">
					<!-- <iframe
						src="https://www.youtube.com/embed/J---aiyznGQ"
						frameborder="0"
						allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
						allowfullscreen
					></iframe> -->
					<div class="plyr__video-embed" id="player">
						<iframe
							src="https://www.youtube.com/embed/sQYM_iaiY44?origin=https://figmaplus.com&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
							allowfullscreen
							allowtransparency
							allow="autoplay"
						></iframe>
					</div>
				</div>
				<div class="modal-close">Close</div>
			</div>
		</div>

		<script src="assets/app.js"></script>
	</body>
</html>
